<template>
	<view>	
		<view v-for="(item, index) in templateData" :key="index" class="box-text">
			<template v-if="item.control_name == 'AuxiliaryBlank'">
				<!-- 辅助空白 -->
				<diy-auxiliary-blank :value="item.style_data.auxiliary_blank"></diy-auxiliary-blank>
			</template>

			<template v-if="item.control_name == 'AuxiliaryLine'">
				<!-- 辅助线 -->
				<diy-auxiliary-line :value="item.style_data.auxiliary_line"></diy-auxiliary-line>
			</template>
		
			<template v-if="item.control_name == 'Discount'">
				<!-- 限时折扣 -->
				<diy-discount></diy-discount>
			</template>
			
			<template v-if="item.control_name == 'Pintuan'">
				<!-- 拼团 -->
				<diy-pintuan></diy-pintuan>
			</template>
			
			<template v-if="item.control_name == 'GroupPurchase'">
				<!-- 团购 -->
				<diy-group-buy></diy-group-buy>
			</template>
			
			<!--  #ifdef  MP-WEIXIN -->
			<template v-if="item.control_name == 'Live'">
				<!-- 直播 -->
				<diy-live-broadcast :value="item.style_data.live"></diy-live-broadcast>
			</template>
			<!--  #endif -->
			
			<template v-if="item.control_name == 'Coupons'">
				<!-- 优惠券 -->
				<diy-coupons v-if="item.control_name == 'Coupons'" :value="item.style_data.coupons"></diy-coupons>
			</template>

			<template v-if="item.control_name == 'GoodsList'">
				<!-- 商品列表 -->
				<diy-goods-list :value="item.style_data.goods_list"></diy-goods-list>
			</template>

			<template v-if="item.control_name == 'ImgAd'">
				<!-- 图片广告 -->
				<diy-img-ad :value="item.style_data.img_ad" @redirectTo="redirectTo"></diy-img-ad>
			</template>

			<template v-if="item.control_name == 'NavHyBrid'">
				<!-- 图文导航 -->
				<diy-nav-hybrid :value="item.style_data.nav_hybrid" @redirectTo="redirectTo"></diy-nav-hybrid>
			</template>

			<template v-if="item.control_name == 'Notice'">
				<!-- 公告 -->
				<diy-notice :value="item.style_data.notice" @redirectTo="redirectTo"></diy-notice>
			</template>

			<template v-if="item.control_name == 'RichText'">
				<!-- 富文本 -->
				<diy-rich-text :value="item.style_data.rich_text"></diy-rich-text>
			</template>

			<template v-if="item.control_name == 'ShowCase'">
				<!-- 魔方、橱窗 -->
				<diy-rubik-cube :value="item.style_data.show_case" @redirectTo="redirectTo"></diy-rubik-cube>
			</template>

			<template v-if="item.control_name == 'GoodsSearch'">
				<!-- 搜索 -->
				<diy-search :value="item.style_data.goods_search"></diy-search>
			</template>

			<template v-if="item.control_name == 'TextNavigation'">
				<!-- 文本导航 -->
				<diy-text-nav :value="item.style_data.text_navigation" @redirectTo="redirectTo"></diy-text-nav>
			</template>

			<template v-if="item.control_name == 'Title'">
				<!-- 标题 -->
				<diy-title :value="item.style_data.title" @redirectTo="redirectTo"></diy-title>
			</template>

			<template v-if="item.control_name == 'Video'">
				<!-- 视频 -->
				<diy-video :value="item.style_data.video"></diy-video>
			</template>
		</view>
		<view @touchmove.prevent.stop>
			<uni-popup ref="uniPopup" type="center" class="wap-floating" :maskClick="false">
				<view class="image-wrap"><image :src="$util.img(wapFloatData.nav_icon)" mode="widthFix" @click="navigatorOut(wapFloatData.nav_url)"></image></view>
				<text class="iconfont iconroundclose" @click="closeNum"></text>
			</uni-popup>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>
<script>
import http from 'common/js/http.js';
import diyLiveBroadcast from '@/components/diy-live-broadcast/diy-live-broadcast.vue';
import diyAuxiliaryBlank from '@/components/diy-auxiliary-blank/diy-auxiliary-blank.vue';
import diyAuxiliaryLine from '@/components/diy-auxiliary-line/diy-auxiliary-line.vue';
import diyCoupons from '@/components/diy-coupons/diy-coupons.vue';
import diyGoodsList from '@/components/diy-goods-list/diy-goods-list.vue';
import diyImgAd from '@/components/diy-img-ad/diy-img-ad.vue';
import diyNavHybrid from '@/components/diy-nav-hybrid/diy-nav-hybrid.vue';
import diyNotice from '@/components/diy-notice/diy-notice.vue';
import diyRichText from '@/components/diy-rich-text/diy-rich-text.vue';
import diyRubikCube from '@/components/diy-rubik-cube/diy-rubik-cube';
import diySearch from '@/components/diy-search/diy-search.vue';
import diyTextNav from '@/components/diy-text-nav/diy-text-nav.vue';
import diyTitle from '@/components/diy-title/diy-title.vue';
import diyVideo from '@/components/diy-video/diy-video.vue';
import loadingCover from '@/components/loading/loading.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import { Weixin } from 'common/js/wx-jssdk.js';
import diyDiscount from '@/components/diy-discount/diy-discount.vue';
import diyPintuan from '@/components/diy-pintuan/diy-pintuan.vue';
import diyGroupBuy from '@/components/div-group-buy/diy-group-buy.vue';
export default {
	components: {
		diyAuxiliaryBlank,
		diyAuxiliaryLine,
		diyCoupons,
		diyGoodsList,
		diyImgAd,
		diyNavHybrid,
		diyNotice,
		diyRichText,
		diyRubikCube,
		diySearch,
		diyTextNav,
		diyTitle,
		diyVideo,
		loadingCover,
		uniPopup,
		diyLiveBroadcast,
		diyDiscount,
		diyPintuan,
		diyGroupBuy
	},
	mixins: [http],
	data() {
		return {
			wapFloatData: '',
			templateData: [],
			uid: 0,
		};
		
	},
	//下拉刷新
	onPullDownRefresh() {
		this.getWapPageLayout();
	},
	onLoad(data) {
		this.getWapPageLayout();
		this.getWapFloating();
		if (data.source_uid) uni.setStorageSync('source_uid', data.source_uid);	
	},
	onShow() {
		if (uni.getStorageSync('token')) {
			this.sendRequest({
				url: 'System.Member.getUserId',
				success: res => {
					if (res.data) this.uid = res.data;
				}
			});
		}
	},
	methods: {				
		getWapPageLayout() {
			var type = 2;
			this.sendRequest({
				url: 'NsDiyView.DiyView.getDiyView',
				data: { template_type: 'index', type: type },
				success: res => {
					let data = res.data;
					if (data) this.templateData = data.template_data;
					uni.stopPullDownRefresh();
					if (this.$refs.loadingCover == undefined) return;
					this.$refs.loadingCover.hide();
				},
				fail: res => {
					if (this.$refs.loadingCover == undefined) return;
					this.$refs.loadingCover.hide();
				}
			});
		},
		/**
		 * 获取首页浮层信息
		 */
		getWapFloating() {
			this.sendRequest({
				url: 'System.Shop.appletFloating',
				success: res => {
					let data = res.data;
					this.wapFloatData = data;
					this.wapFloatData.show_type = this.wapFloatData.show_type == undefined ? 'once' : this.wapFloatData.show_type;
					this.wapFloatData.show_num = this.wapFloatData.show_num == undefined ? 1 : this.wapFloatData.show_num;
					if (this.wapFloatData.nav_icon && this.wapFloatData.is_show == 1) {
						this.refreshFloating();
					}
				}
			});
		},
		refreshFloating() {
			let that = this;
			if (uni.getStorageSync('index_wap_floating_layer') != null && uni.getStorageSync('index_wap_floating_layer') != '') {
				var wap_floating_cookie = JSON.parse(uni.getStorageSync('index_wap_floating_layer'));
				if (this.wapFloatData.nav_icon != wap_floating_cookie.imgPath) {
					this.$refs.uniPopup.open();
				} else {
					if (this.wapFloatData.show_type == 'many' && wap_floating_cookie.closeNum < this.wapFloatData.show_num) {
						this.$refs.uniPopup.open();
					}
				}
			} else {
				this.$refs.uniPopup.open();
			}
		},
		closeNum() {
			this.$refs.uniPopup.close();
			var closeNum = 1;
			if (uni.getStorageSync('index_wap_floating_layer') != null && uni.getStorageSync('index_wap_floating_layer') != '') {
				var wap_floating_cookie = JSON.parse(uni.getStorageSync('index_wap_floating_layer'));
				if (this.wapFloatData.nav_icon == wap_floating_cookie.imgPath) {
					closeNum = wap_floating_cookie.closeNum + 1;
				}
			}
			if (this.wapFloatData.show_type == 'many') {
				uni.setStorageSync('index_wap_floating_layer', JSON.stringify({ imgPath: this.wapFloatData.nav_icon, closeNum: closeNum }));
			} else {
				uni.setStorageSync('index_wap_floating_layer', JSON.stringify({ imgPath: this.wapFloatData.nav_icon, closeNum: closeNum }));
			}
		},
		//自定义模板的跳转链接
		redirectTo(link) {
			if (link == null || link == '') return;
			var uniapp_template = link.uniapp_template;

			// 要对自定义链接进行判断,是否是tabbar页面
			if (uniapp_template.title == '自定义模板') {
				var tabbar = ['/pages/index/index/index', '/pages/goods/category/category', '/pages/goods/cart/cart', '/pages/member/index/index'];
				if (uniapp_template.url.indexOf('http') != -1) {
					this.$util.redirectTo('/pages/index/web/web?src=' + uniapp_template.url);
				} else if (tabbar.indexOf(uniapp_template.url) != -1) {
					this.$util.redirectTo(uniapp_template.url, {}, 'tabbar');
				} else {
					this.$util.redirectTo(uniapp_template.url);
				}
			} else {
				if (uniapp_template.is_tabbar == 1) {
					this.$util.redirectTo(uniapp_template.url, {}, 'tabbar');
				} else {
					this.$util.redirectTo(uniapp_template.url);
				}
			}
		},
		navigatorOut(src) {
			if (src.indexOf('https://') == -1 && src.indexOf('http://') == -1) this.$util.redirectTo(src);
			else this.$util.redirectTo('/pages/index/web/web', { src });
		}
	},
	onReady() {
		this.$refs.loadingCover.hide();
		// 微信公众号分享
		// #ifdef H5
		if (this.$util.isWeiXin()) {
			this.sendRequest({
				url: 'System.WchatPublic.getJsApiConfig',
				data : {
					url: window.location.href
				},
				success: jsApiRes => {
					if (jsApiRes.code == 0) {
						var wxJS = new Weixin();
						wxJS.init(jsApiRes.data);
						
						this.sendRequest({
							url: 'System.Member.shareContents',
							data: {
								flag: 'shop'
							},
							success: res => {
								if (res.data) {
									wxJS.updateAppMessageShareData({
										title: res.data.share_title,
										desc: res.data.share_contents + '\r\n' + res.data.share_nick_name + '\r\n' + '收藏热度：★★★★★',
										link: res.data.share_url,
										imgUrl: res.data.share_img,
									}, () => {
										this.sendRequest({
											url: 'NsMemberShare.MemberShare.shareReward'
										})
									})
								}
							}
						})
					}
				}
			})
		}
		// #endif
	},
	/**
	 * 自定义分享内容
	 * @param {Object} res
	 */
	onShareAppMessage(res) {
		var path = '/pages/index/index/index';
		if (this.uid) path += '?source_uid=' + this.uid;
		return {
			path: path,
			success: res => {
				this.sendRequest({
					url: 'NsMemberShare.MemberShare.shareReward'
				})
			},
			fail: res => {}
		};
	}
};
</script>

<style lang="scss">	
.box-text{
	background:#fff
}
navigator {
	padding: 20rpx;
	color: #fff;
	background: $base-color;
	margin: 20rpx 0;
}
.wap-floating,
.uni-popup__wrapper-box {
	.image-wrap {
		width: 480rpx;
		image {
			width: 100%;
			border-radius: 40rpx;
		}
	}

	text {
		display: block;
		font-size: 60rpx;
		color: #ffffff;
	}
}
.uni-popup__wrapper-box {
	text-align: center;
	overflow: initial !important;
	background: none !important;
	vertical-align: middle;
	background: none;
}
::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
}
</style>
<style scoped>
.wap-floating >>> .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
	background: none !important;
}
</style>
